<template>
  <div>
    <a-card>
      <h2>Dashboard</h2>
      <a-card>
        <div class="list">
          <div class="item">
            <div class="title">商品总数</div>
            <div class="count">共 {{ baseInfo.goodNum }} 种</div>
          </div>
          <div class="item">
            <div class="title">用户总数</div>
            <div class="count">共 {{ baseInfo.userNum }} 个</div>
          </div>
          <div class="item">
            <div class="title">日志总数</div>
            <div class="count">共 {{ baseInfo.logNum }} 条</div>
          </div>
        </div>
      </a-card>
    </a-card>
    <div class="mt-10">
      <div class="table-list">
        <div class="left">
          <goods simple />
        </div>
        <div class="right">
          <log simple />
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { defineComponent, ref, onMounted } from 'vue'
import { handleResult } from '../helpers/utils'
import { dashboardService } from '../services'
import Goods from './Goods/index.vue'
import Log from './Log.vue'

export default defineComponent({
  components: {
    Goods,
    Log
  },
  setup () {
    const baseInfo = ref({
      goodNum: 0,
      userNum: 0,
      logNum: 0
    })
    const getBaseInfo = async () => {
      const res = await dashboardService.getBaseInfo()
      handleResult(res).success(({ data }) => {
        baseInfo.value = data
      })
    }
    onMounted(() => {
      getBaseInfo()
    })
    return {
      baseInfo
    }
  }
})
</script>

<style lang="scss" scoped>
.list {
  display: flex;
  .item {
    flex: 1;
    .title {
      color: #666;
    }
    .count {
      margin-top: 10px;
      font-weight: 700;
      color: black;
      font-size: 24px;
    }
  }
}
.table-list {
  display: flex;
  gap: 10px;
  .left {
    flex: 1;
  }
  .right {
    flex: 1;
  }
}
</style>
